<template>
  <view class="fly-bar-cont">
    <scroll-view scroll-y style="max-height: 56vh">
      <ve-card :custom-style="{ border: '1px solid #f4f4f4' }" :title="group.title" type="none" v-for="group in list" :key="group.id">
        <template #title>
          <view class="btn-wrap">
            <ve-button v-if="group.useType == 11 && btnPermission" size="tiny" type="plain" @click="removeTempUseFn(group)"
              >释放库存</ve-button
            >
          </view>
        </template>
        <ve-cell v-for="column in group.columns" :key="column.label" :label="column.label">
          <OrderCodeLink
            :orderCode="column.value"
            :type="column.useType"
            :append="group.orderStatusName"
            :tag="group.tag"
            :id="group.refId"
            :disabled="selectable"
          />
        </ve-cell>
      </ve-card>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { removeTempUse } from '@/api/asset/car-stock'
  import { usePermission } from '@/hooks/usePermission'
  import OrderCodeLink from '@/components/order-code-link.vue'

  const props = defineProps({
    data: Object,
    selectable: Boolean,
  })
  const emits = defineEmits(['ok'])

  // 按钮权限并且不是选择车辆
  const btnPermission = usePermission('svmsapp:stock.removeTempUse') && !props.selectable

  function getTitle(it: any) {
    if (it.useTypeName == '长租') {
      return '长租订单'
    }
    return it.channelTypeName ? it.channelTypeName + '订单' : it.useTypeName
  }

  const getColumns = (useType: number, useTypeName: string, data: any) => {
    // 长租
    if (useType == 3) {
      return [
        { label: '长租订单号', value: data.orderCode, useType },
        { label: '占用时间', value: data.range },
        { label: '取车门店', value: data.siteName },
        { label: '还车门店', value: data.returnSiteName },
        { label: '承租人', value: data.clientName },
        { label: '联系电话', value: data.memberPhone },
        { label: '系统下单车型', value: data.orderModelName },
      ]
    }
    // 短租
    else if (useType == 2) {
      const columns = [
        { label: '短租订单号', value: data.orderCode, useType },
        { label: '租赁周期', value: data.lease },
        { label: '占用时间', value: data.range },
        { label: '取车门店', value: data.siteName },
        { label: '还车门店', value: data.returnSiteName },
      ]
      if (data.channelOrderCode) {
        columns.push({ label: '渠道订单号', value: data.channelOrderCode })
      }
      columns.push({ label: '承租人', value: data.client })
      if (data.channelModelName) {
        columns.push({ label: '渠道下单车型', value: data.channelModelName })
      }
      columns.push({ label: '系统下单车型', value: data.orderModelName })
      return columns
      // 运维
    } else if (useType == 4 || useType == 5 || useType == 6) {
      const noTitle = useTypeName + '号'
      return [
        { label: noTitle, value: data.orderCode, useType },
        { label: '占用时间', value: data.range },
        { label: '负责人', value: data.undertaker },
      ]
      // 临时占用
    } else if (useType == 11) {
      const columns = [
        { label: '临时占用ID', value: data.orderCode, useType },
        { label: '占用时间', value: data.range },
        { label: '占用原因', value: data.remark },
        { label: '操作时间', value: data.createTime },
        { label: '操作人', value: data.createUser },
      ]
      return columns
      // 借出
    } else if (useType == 12) {
      const columns = [
        { label: '借调单号', value: data.orderCode, useType },
        { label: '借调周期', value: data.range },
        { label: '同行', value: data.industryName },
      ]
      return columns
    }
    return [
      { label: '订单号', value: data.orderCode, useType },
      { label: '占用时间', value: data.range },
    ]
  }

  const list = ref<any>([])

  // 生成tag
  const determineTag = (typeSet: number[]) => {
    if (!typeSet) return ''
    const hasType4 = typeSet.includes(4)
    const hasType9 = typeSet.includes(9)
    const hasType5 = typeSet.includes(5)
    let tag = []
    if (hasType4 || hasType9) {
      tag.push('逾期')
    }
    if (hasType5) {
      tag.push('冲突')
    }
    return tag.join(' | ')
  }

  const init = () => {
    props.data?.list.forEach((it: any) => {
      it.range = it.fromTime?.slice(0, 16) + ' 至 ' + it.toTime?.slice(0, 16)
      it.lease = it.orderStartTime?.slice(0, 16) + ' 至 ' + it.orderEndTime?.slice(0, 16)
      it.client = it.clientName + '（' + it.memberPhone + '）'
      it.tag = determineTag(it.typeSet)

      const order_it = {
        id: it.id,
        title: getTitle(it),
        columns: getColumns(it.useType, it.useTypeName, it),
        useType: it.useType,
        refId: it.refId,
        orderStatusName: it.orderStatusName,
        typeList: it.typeList,
        tag: it.tag,
      }
      list.value.push(order_it)
    })
  }

  // 释放库存
  const removeTempUseFn = (data: any) => {
    uni.showModal({
      title: '提示',
      content: '是否确认释放库存？',
      confirmText: '确认',
      success: (res) => {
        if (res.confirm) {
          removeTempUse({ id: data.id }).then(() => {
            emits('ok')
          })
        }
      },
    })
  }

  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .fly-bar-cont {
    // padding-bottom: 24rpx;
    .btn-wrap {
      flex: 1;
      text-align: right;
    }
  }
</style>
